<template>
  <div>
    <!-- 搜索框 -->
    <div id="nav-head">
      <div class="left">
        <van-icon name="arrow-left" size="22" @click="back"/>
      </div>
      <div class="center">
        <van-search type="text" v-model="text" placeholder="满58包邮！输入关键字搜索" background="#409EFF" shape="round" @search="toSearch()"/>
      </div>
      <div class="right">
        <van-button color="#409EFF" @click="toSearch()">搜索</van-button>
      </div>
    </div>
    <!-- 搜索框 -->
    <!-- 分类列表 -->
    <div class="item">
      <!-- 左侧导航 -->
      <ul class="nav-bar">
        <li v-for="(cate,index) in cates" :key="cate.id" @click="switchTab(index)" :class="[{active: activeIndex === index }]">{{cate.name}}</li>
      </ul>
      <!-- 左侧导航 -->
      <!-- 右侧商品列表 -->
      <div class="item-list" v-if="isShow">
        <transition-group name="ani">
          <van-card id="num" v-for="item in items" :key="item.id" @click="goDetail(item.id)"
            :num="item.stores"
            :tag="item.recommendStatusStr"
            :price="item.minPrice"
            :title="item.name"
            :thumb="item.pic"
            :origin-price="item.originalPrice"
            >
            <template #tags>
              <van-tag plain type="danger">打折</van-tag>
            </template>
          </van-card>
        </transition-group>
      </div>
      <!-- 空状态 -->
      <div v-else class="empty-box">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="您找的商品飞走了哟"
        />
      </div>
      <!-- 右侧商品列表 -->
    </div>
    <!-- 分类列表 -->
    <tabbar/>
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar.vue'
import { fetchCate, fetchItemList } from '_api'
export default {
  name: 'HomeHead',
  data () {
    return {
      text: '', // 历史记录
      items: [], // 分类商品列表
      cates: [], // 导航菜单
      activeIndex: 0,
      isShow: false
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    // 切换tab
    switchTab (index) {
      // 将当前的index与高亮类相等，同时index代表了第几个分类，index就是对应分类的下标
      this.activeIndex = index
      this.fetchItemLists()
    },
    // 请求左侧导航菜单
    fetchCates () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          // 在这里调用分类商品列表，保证cates存在数据
          this.fetchItemLists()
        }
      })
    },
    // 请求分类对应的商品列表
    fetchItemLists () {
      fetchItemList({
        categoryId: this.cates[this.activeIndex].id
      }).then(res => {
        if (res.data.code === 0) {
          this.isShow = true
          this.items = res.data.data.result
        }
        if (res.data.code === 700) {
          this.items = []
          this.isShow = false
        }
      })
    },
    // 点击搜索框进入搜索页
    toSearch (value) {
      this.$router.push({
        path: '/searchList',
        query: {
          k: this.text
        }
      })
    },
    // 跳转到详情页
    goDetail (id) {
      this.$router.push({
        path: '/detail',
        query: { id }
      })
    },
    // 回退
    back () {
      this.$router.go(-1)
    }
  },
  components: { Tabbar }
}
</script>

<style lang="scss" scoped>
#nav-head {
  font-size: 22px;
  background-color: #409EFF;
  position: fixed;
  z-index: 9;
  width: 100%;
  display: flex;
  align-items: center;
  .left,.right {
    background-color: #409EFF;
    flex: 2;
    text-align: center;
    color: #fff;
  }
  .left {
    flex: 1
  }
  .center{
    flex: 9
  }
}
.item{
  padding-top: 1.3rem;
  display: flex;
  .nav-bar{
    width: 2.5rem;
    overflow-y: auto;
    li{
      position: relative;
      padding: 0.2rem 0.1rem;
      font-size: 0.35rem;
      line-height: 1rem;
      text-align: center;
      &.active{
        background-color: #fff;
        color: orangered;
        &:before{
          content: '';
          position: absolute;
          width: 0.05rem;
          height: 0.8rem;
          background-color: orangered;
          left: 0;
          top: 0.3rem;
        }
      }
    }
  }
  .item-list {
    width: 7.5rem;
    background-color: #fff;
    #num{
      .van-card__title{
        font-size: 16px;
        padding: 5px;
      }
      .van-card__desc{
        padding: 5px;
      }
      .van-tag{
        margin: 0 5px 5px 5px;
      }
      .van-card__price-currency{
        padding: 5px;
      }
      .icon {
        font-size: 22px;
        color: orangered;
      }
    }
  }
}
// 分类列表的切换小苹果
@keyframes enter {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes leave {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}
.ani-enter-active{
  animation: enter 0.5s ease-in;
}
.ani-leave-active{
  animation: leave 0.5s ease-out;
}
// 空状态的盒子
.empty-box{
  position: relative;
  width: 100%;
  .van-empty{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-image .van-empty__image {
    width: 2.4324rem;
    height: 2.4324rem;
  }
  ::v-deep .van-empty__description{
    padding: 0;
  }
}

</style>
